<template>
  <div class="box">
    <!-- 左上box -->
    <HerinContainer
      class="MainCoal-box"
      :delay="1"
      direction="Left"
      title="视频统计"
      style="height: 502px"
    >
      <!-- 视频统计 -->
      <div slot="content" class="MainCoal-box-content">
        <div class="sensorSum">
          <p class="sum">
            <img
              src="../../../../src/assets/img/monitor/icon-3.png"
              alt=""
            />视频总量
          </p>
          <p>
            <span class="num" style="color: rgba(248, 248, 248, 100)">{{videoTotal}}</span
            ><span class="piece">个</span>
          </p>
        </div>
        <!-- 井上  井下数量 -->
        <div class="sensorState">
          <div class="normal">
            <p class="sum">井上数量</p>
            <p>
              <span class="num" style="color: rgba(0, 253, 255, 100)">{{upTotal}}</span
              ><span class="piece">个</span>
            </p>
          </div>
          <div class="odd">
            <p class="sum">井下数量</p>
            <p>
              <span class="num" style="color: rgba(52, 200, 255, 100)">{{underTotal}}</span
              ><span class="piece">个</span>
            </p>
          </div>
        </div>
        <!-- 在线率 图表 -->
        <div class="normalRate">
          <div class="chat">
            <p class="title">{{onlineRate}}<span>%</span></p>
            <div class="Rate">
              <p>在线率</p>
            </div>
          </div>
          <div class="right">
            <div>
              <p>
                <span
                  class="point"
                  style="background-color: rgba(18, 208, 161, 100)"
                ></span
                ><span class="title">在线设备</span>
              </p>
              <p><span class="num">{{onlineTotal}}</span><span class="piece">个</span></p>
            </div>
            <div>
              <p>
                <span
                  class="point"
                  style="background-color: rgba(240, 85, 82, 100)"
                ></span
                ><span class="title">离线设备</span>
              </p>
              <p><span class="num">{{offlineTotal}}</span><span class="piece">个</span></p>
            </div>
          </div>
        </div>
        <p style="color: rgba(173, 173, 173, 100); font-size: 12px">
          井下视频区域统计
        </p>
        <!-- 井下视频区域统计  图表 -->
        <div class="sensorSort">
          <div class="Chart">
            <div class="chat">
              <RoseChart :data="cateLists" :color="color" />
            </div>
            <div class="cont">
              <Legend1
                v-for="(item, idx) in cateLists"
                :key="item.x"
                class="item"
                :name="item.x"
                :num="item.y"
                :color="sensorList[idx]"
                unit=""
              ></Legend1>
            </div>
          </div>
        </div>
      </div>
    </HerinContainer>
    <!-- 左下box -->
    <HerinContainer
      class="MainCoal-box"
      :delay="1"
      direction="Left"
      title="视频列表"
      style="height: 468px"
    >
      <!-- 视频列表 -->
      <div slot="content" class="MainCoal-box-content">
        <div class="search-wrap">
          <HerinSelect
            v-model="selectType"
            class="herin-select"
            :options="outageOption"
            place-holder=""
            :height="28"
            :width="160"
            :showOptionscount="3"
            @HerinSelectChange="handleSelectChange"
            style="background-color: rgba(255, 255, 255, 0.05)"
          />
          <div
            class="input-box"
            style="background-color: rgba(255, 255, 255, 0.05)"
          >
            <input
              v-model="searchInput"
              type="text"
              placeholder="请输入视频名称"
            />
            <i
              v-show="searchInput"
              class="el-icon el-icon-close"
              @click="clearInput"
            />
            <i class="el-icon el-icon-search" @click="handleSearch" />
          </div>
        </div>
        <div class="drop">
          <dropDown :sensorLists="videoLists" />
        </div>
      </div>
    </HerinContainer>
  </div>
</template>
<script>
import HerinContainer from '@/components/HerinContainer';
import RoseChart from '@/components/chart/pie/RoseChart.vue';
import HerinSelect from '@/components/herinselect/HerinSelect.vue';
import dropDown from './dropDown.vue';
import Legend1 from '@/components/chart/legend/Legend1.vue';

import { getUnderInfo, queryCameraList } from '@/api/item/monitor/video.js';

export default {
  components: {
    HerinContainer,
    HerinSelect,
    RoseChart,
    dropDown,
    Legend1
  },
  data() {
    return {
      activeNames: ['1'],
      selectType: '2',
      searchInput: '',
      outageOption: [
        {
          label: '全部视频',
          value: '2'
        },
        {
          label: '井上视频',
          value: '0'
        },
        {
          label: '井下视频',
          value: '1'
        }
      ],
      sensorList: [
        '#34C8FF',
        '#34C8FF',
        '#FB9B2A',
        '#ffffff',
        '#00FDFF',
        '#34C8FF',
        '#FB9B2A',
        '#34C8FF'
      ],
      color: ['#34C8FF', '#FFD101', '#57FFAA', '#00FDFF', '#1ED9FF'],
      // 第一个选择框
      videoTotal: 200, // 视频总量
      upTotal: 65, // 井上数量
      underTotal: 135, // 井下数量
      onlineTotal: 192, // 在线设备数量
      onlineRate: 96, // 在线率
      offlineTotal: 8, // 离线设备数量
      underStatic: [],
      videoLists: [],
      actionLoopTimer: null
    };
  },
  computed: {
    cateLists() {
      const list = this.underStatic.map(item => {
        return {
          x: item.regionName,
          y: item.number * 1
        };
      });
      return list;
    }
  },
  mounted() {
    this.startActionLoop3S(
      this.allFu
    );
  },
  beforeDestroy() {
    this.actionLoopTimer && clearInterval(this.actionLoopTimer);
    this.actionLoopTimer = null;
  },
  methods: {
    // 每隔 3S 循环查询数据
    startActionLoop3S(callback) {
      callback();
      this.actionLoopTimer = setInterval(callback, 3000);
    },
    allFu() {
      this.getUnderInfo3S();
      this.queryCameraList3S();
    },
    // 获取视频列表数据
    async queryCameraList3S() {
      const params = {
        isUp: this.selectType,
        keyWord: this.searchInput
      };
      const res = await queryCameraList(params);
      if (res.data.code === 200) {
        if (res.data.data) {
          this.videoLists = res.data.data;
        }
      }
    },
    // 点击视频列表下拉菜单
    handleSelectChange() {
      this.searchInput = '';
      this.queryCameraList3S();
    },
    // 点击视频列表搜索按钮
    handleSearch() {
      this.queryCameraList3S();
    },
    // 点击视频列表清除搜索框
    clearInput() {
      this.searchInput = '';
      this.queryCameraList3S();
    },

    // 获取在线率以及井下视频区域统计信息
    async getUnderInfo3S() {
      const res = await getUnderInfo();
      if (res.data.code === 200) {
        const { onlineTotal, onlineRate, offlineTotal, upTotal, underTotal, videoTotal, underStatic } = res.data.data;
        this.videoTotal = videoTotal; // 视频总量
        this.upTotal = upTotal; // 井上数量
        this.underTotal = underTotal; // 井下数量
        this.onlineTotal = onlineTotal; // 在线设备数量
        this.onlineRate = onlineRate; // 在线率
        this.offlineTotal = offlineTotal; // 离线设备数量
        this.underStatic = underStatic; // 井下视频区域统计模块数据
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.MainCoal-box {
  &-tab {
    display: flex;
    .btn {
      @include btn;
    }
    .isbtn {
      background-color: rgba(0, 228, 255, 0.2);
      color: $cyan;
    }
  }
  &-content {
    .mouldbox {
      margin-top: 1.875rem;
    }
    .mouldbox:first-child {
      margin-top: 0.3125rem;
    }
  }
  .num {
    font-size: 16px;
    text-align: right;
    font-family: Helvetica-bold;
    font-weight: 900;
  }
  .piece {
    color: rgba(131, 131, 131, 100);
    font-size: 12px;
    text-align: left;
    font-family: Helvetica-regular;
    margin: 0 0.9375rem 0 0.3125rem;
  }
  .sensorSum {
    display: flex;
    width: 20.625rem;
    height: 2.5rem;
    justify-content: space-between;
    background-color: rgba(255, 255, 255, 0.1);
    color: rgba(16, 16, 16, 100);
    font-size: 14px;
    padding: 0 0.625rem;
    img {
      width: 1rem;
      height: 1rem;
      margin: 0 0.75rem 0 0.3125rem;
    }
    p {
      display: flex;
      align-items: center;
    }
    .sum {
      color: rgba(248, 248, 248, 100);
      font-size: 14px;
      text-align: left;
      font-family: Helvetica-regular;
    }
  }
  .sensorState {
    margin: 0.625rem 0;
    display: flex;
    width: 20.625rem;
    height: 2.5rem;
    justify-content: space-between;
    font-size: 14px;
    .normal,
    .odd {
      width: 160px;
      height: 40px;
      background-color: rgba(255, 255, 255, 0.1);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .sum {
      color: rgba(248, 248, 248, 100);
      font-size: 14px;
      display: flex;
      align-items: center;
      span {
        display: inline-block;
        width: 0.25rem;
        height: 0.25rem;
        border-radius: 50%;
        margin: 0 0.625rem 0 0.9375rem;
      }
    }
  }
  .normalRate {
    width: 100%;
    display: flex;
    margin: 0.9375rem 0 1.25rem 0;
    justify-content: space-around;
    .chat {
      width: 6.8125rem;
      height: 6.8125rem;
      background: url(@/assets/img/monitor/icon-22.png);
      background-size: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      p {
        text-align: center;
        color: rgba(255, 255, 255, 100);
        font-size: 18px;
      }
      .title {
        margin-top: 30px;
        span{
          font-size: 12px;
          margin-left: 5px;
        }
      }
      .Rate {
        width: 87px;
        height: 46px;
        background: url(@/assets/img/monitor/icon-21.png) no-repeat;
        background-size: 100%;
      }
    }
    .right {
      height: 6.875rem;
      div {
        display: flex;
        height: 3.4375rem;
        justify-content: space-between;
        align-items: center;
      }
      .piece {
        color: rgba(131, 131, 131, 100);
        font-size: 12px;
        text-align: left;
        font-family: Helvetica-regular;
        margin: 0;
      }
      p {
        margin: 1.5rem 0;
      }
      .point {
        display: inline-block;
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 50%;
      }
      .title {
        color: rgba(232, 232, 232, 100);
        font-size: 14px;
        margin: 0 0.9rem 0 0.375rem;
      }
      .num {
        color: rgba(255, 255, 255, 100);
        font-size: 16px;
        margin-right: 0.3125rem;
      }
    }
  }
  .sensorSort {
    .Chart {
    display: flex;
    justify-content: space-between;
    margin: 10px 0 15px 0;
    .chat {
      width: 7.6875rem;
      height: 7.6875rem;
    }
    .cont {
      width: 12rem;
      height: 7.6875rem;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .item{
        min-width: 4.5rem;
      }
    }
  }
  }
  .outageList {
    .cont {
      justify-content: space-between;
      display: flex;
      p {
        align-items: center;
        display: flex;
      }
      .title {
        color: rgba(248, 248, 248, 100);
        font-size: 14px;
        margin: 0.625rem 0;
      }
    }
    .state {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: rgba(173, 173, 173, 100);
    }
  }
  .broken {
    height: 2.375rem;
    width: 20.625rem;
    display: flex;
    justify-content: space-between;
    div {
      width: 10rem;
      border-radius: 2px;
      background-color: rgba(255, 255, 255, 0.1);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-left: 0.625rem;
    }
    .title {
      color: rgba(248, 248, 248, 100);
      font-size: 14px;
    }
    .num {
      color: rgba(0, 253, 255, 100);
      font-size: 16px;
      font-weight: 900;
    }
  }
  .chartBroken {
    display: flex;
    align-items: center;
    margin: 0.625rem 0;
    .charttitle {
      font-size: 0.75rem;
      color: $light2Grey;
      margin-right: 0.3125rem;
    }
    .line {
      flex: 1;
      height: 0.0625rem;
      border-bottom: 0.0625rem dashed $darkGrey;
    }
  }
  .outage {
    height: 8.5rem;
    width: 100%;
  }
  .search-wrap {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.625rem;
    .input-box {
      width: 10rem;
      height: 1.75rem;
      border: 0.0625rem solid rgba($color: #ffffff, $alpha: 0.2);
      border-radius: 0.25rem;
      position: relative;
      text-align: left;
      box-sizing: border-box;
      input {
        width: 72%;
        height: 100%;
        margin: 0 0.625rem;
        border: none;
        font-size: 0.75rem;
        color: rgba($color: $white, $alpha: 0.9);
        background-color: transparent;
        outline-width: 0rem;
      }
      input::-webkit-input-placeholder {
        font-size: 0.75rem;
        color: $secondaryTextColor;
      }
      .el-icon {
        display: inline-block;
        width: 0.875rem;
        height: 0.875rem;
        line-height: 0.875rem;
        font-size: 0.75rem;
        cursor: pointer;
        color: rgba($color: $white, $alpha: 0.5);
        position: absolute;
        top: 0.4375rem;
        &-close {
          right: 1.375rem;
        }
        &-search {
          right: 0.25rem;
          font-size: 0.75rem;
        }
      }
    }
  }
  .drop {
    width: calc(100% + 10px);
    height: 370px;
    overflow: auto;
    padding-right: 10px;
  }
}
</style>
